﻿@theme: "../refs/";

@import "@{theme}variables.less";
@import "@{theme}mixins.less";

#j-narbar-top-menu {
    position: relative;
    width: 900px;
}

.navbar-top-menu {
    margin-top: @grid-gutter-width/2;
    margin-bottom: 0;

    .dropdown-top-menu {
        position: static;
    }

    .navbar-header {
        width: @block-category-width;
        color: @link-hover-color;
        height: @navbar-height;
        line-height: @navbar-height;
        text-align: center;
        font-size: @font-size-h4;
        position: relative;

        .navbar-header-inner {
            position: absolute;
            top: -7px;
            padding-top: 3px;
            background: url(../images/nav-bg.png) left top rgba(242, 242, 242, 0.98);
            width: @block-category-width;
            height: @navbar-height+7;
            cursor: pointer;

            &.hover {
                border: 1px solid @brand-primary;
                .box-shadow(1px 2px 5px @brand-primary);
            }
        }
    }

    .sep {
        height: @navbar-height;
        float: left;
        position: relative;
        width: 3px;

        .sep-wrap {
            position: absolute;
            left: 0;
            top: -1px;
            width: 3px;
            height: @navbar-height;
            background: darken( @brand-primary,10%);
        }

        .triangle {
            position: absolute;
            left: 0;
            top: -7px;
            width: 0;
            height: 0;
            border-right: 7px solid transparent;
            border-bottom: 7px solid darken( @brand-primary,10%); //@link-hover-color
            _font-size: 0;
            _line-height: 0;
            _border-right-color: #abc;
            _filter: chroma(color=#aabbcc);
        }
    }
}
